import { Link } from "@tanstack/react-router";
import { format } from "date-fns";
import {
	CircleCheck,
	CircleDotDashedIcon,
	CircleX,
	FlaskConical,
} from "lucide-react";
import {
	Card,
	CardContent,
	CardDescription,
	CardFooter,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";

export function ReportsCard() {
	return (
		<Link to="/reports/$id" params={{ id: "123" }}>
			<Card className="group hover:bg-muted hover:text-muted-foreground transition-all duration-100 hover:cursor-pointer justify-between gap-0 h-full w-full">
				<CardHeader>
					<CardTitle className="overflow-hidden overflow-ellipsis whitespace-nowrap">
						title
					</CardTitle>
					<CardDescription>
						{format(new Date(), "yyyy-MM-dd hh:mm:ss")}
					</CardDescription>
				</CardHeader>
				<CardContent>
					<p className="text-3xl font-semibold">90.50 %</p>
				</CardContent>
				<CardFooter className="text-muted-foreground flex justify-between text-xs">
					<div className="flex items-center gap-4">
						<div className="flex items-center gap-1">
							<FlaskConical className="size-4" />
							<p>100</p>
						</div>
						<div className="flex items-center gap-1">
							<CircleCheck className="size-4" />
							<p>100</p>
						</div>
						<div className="flex items-center gap-1">
							<CircleX className="size-4 group-hover:text-destructive/70" />
							<p>100</p>
						</div>
					</div>
					<div className="flex items-center gap-2">
						<CircleDotDashedIcon className="size-4 group-hover:text-primary/70" />
						<p>100</p>
					</div>
				</CardFooter>
			</Card>
		</Link>
	);
}
